<template>
  <div class="duoshangpin">
    <div v-if="!shoujiban">
      <left></left>
      <div class="right">
        <div
          style="
            height: 91px;
            border-bottom: 1px solid rgb(227, 232, 241);
            width: 100%;
            padding: 0 30px;
          "
          class="flexbc"
        >
          <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item :to="{ path: '/' }"
              >商品管理</el-breadcrumb-item
            >
            <el-breadcrumb-item
              :to="{ path: '/shangpinguanli/shangpinziliaoku' }"
              >商品资料库</el-breadcrumb-item
            >
          </el-breadcrumb>
          <top></top>
        </div>
        <div
          style="
            padding: 37px 30px 0 30px;
            height: calc(100vh - 91px);
            overflow: auto;
          "
        >
          <div style="margin-bottom: 3rem">
            <div
              class="flexc"
              style="font-size: 16px; font-weight: bold; margin-bottom: 20px"
            >
              <div>
                <img
                  src="../../../static/img/xitong3.png"
                  style="width: 22px; margin-right: 10px"
                />
              </div>
              <div>商品资料库</div>
            </div>
            <div class="flexc" style="width: 100%;">
            <div
              style="
                height: 112px; flex-grow: 1; margin-right: 20px;
                background: rgb(255, 255, 255);
                border-radius: 20px;
                padding: 20px;
              "
            >
              <div class="flex">
                <div>
                  <div style="margin-bottom: 10px">商品名称&编码</div>
                  <div>
                    <el-input
                      v-model="search.goods_info"
                      style="width: 200px; margin-right: 30px"
                      placeholder="请输入"
                    ></el-input>
                  </div>
                </div>
                <div>
                  <div style="margin-bottom: 10px">编辑状态</div>
                  <el-select
                    v-model="search.desc_status"
                    clearable
                    style="width: 200px; margin-right: 30px"
                    placeholder="编辑状态"
                  >
                    <el-option label="已编辑" :value="1"> </el-option>
                    <el-option label="未编辑" :value="0"> </el-option>
                  </el-select>
                </div>
                <div>
                  <div style="margin-bottom: 10px">上下架状态</div>
                  <el-select
                    v-model="search.status"
                    clearable
                    style="width: 200px; margin-right: 30px"
                    placeholder="上下架状态"
                  >
                    <el-option label="上架" :value="100"> </el-option>
                    <el-option label="下架" :value="0"> </el-option>
                  </el-select>
                </div>
                <div style="margin-right: 30px">
                  <div style="margin-bottom: 10px">&nbsp;</div>
                  <div>
                    <el-button
                      @click="searchbtn"
                      type="primary"
                      round
                      icon="el-icon-search"
                      >检索</el-button
                    >
                  </div>
                </div>
              </div>
            </div>

            <div
              style="width: 112px; height: 112px; background: rgb(255, 255, 255);border-radius: 20px; cursor: pointer;"
              class="flexc"
              @click="copys()"
            >
              <div style="padding: 0 20px;">

                <div class="flexcc">
                    <img
                      src="../../../static/img/lianjie.png"
                      style="width: 24px; margin-bottom: 16px;"
                    />
                  </div>
                  <div>复制链接</div>


              </div>
            </div>
            </div>
          </div>

          <div style="margin-top: 20px; width: 100%">
            <el-table :data="list" style="width: 100%">
              <el-table-column
                show-overflow-tooltip="true"
                width="240"
                align="center"
                prop="title"
                label="商品名称"
              ></el-table-column>
              <el-table-column
                align="center"
                prop="fetch_code"
                label="商品编码"
              ></el-table-column>
              <el-table-column
                align="center"
                prop="desc_status"
                label="编辑状态"
              >
                <template slot-scope="scope">
                  <div v-if="scope.row.desc_status == 1">已编辑</div>
                  <div
                    v-if="scope.row.desc_status == 0"
                    style="color: rgb(255, 0, 0)"
                  >
                    未编辑
                  </div>
                </template>
              </el-table-column>
              <el-table-column
                align="center"
                prop="status"
                label="上下架状态"
              >
                <template slot-scope="scope">
                  <span v-if="scope.row.status == 100">上架</span>
                  <span v-if="scope.row.status == 0">下架</span>
                </template>
              </el-table-column>
              <el-table-column
                align="center"
                prop="updated_at"
                label="更新时间"
              ></el-table-column>
              <el-table-column
                align="center"
                prop="ok_count"
                label="操作"
              >
                <template slot-scope="scope">
                    <div
                      @click="bianjishop(scope.row)"
                      style="
                        color: rgb(0, 90, 255);
                        margin-right: 20px;
                        cursor: pointer;
                      "
                    >
                      编辑详情
                    </div>
                </template>
              </el-table-column>
            </el-table>
            <el-pagination
              style="text-align: right; padding: 20px"
              background
              layout="prev,pager,next,total,jumper"
              :page-size="search.page_size"
              @current-change="pagechange"
              :total="total"
            ></el-pagination>
          </div>
        </div>
      </div>
    </div>
    <div
      v-if="shoujiban"
      style="
        color: rgb(2, 12, 29);
        font-size: 0.24rem;
        background: #f6f8fb;
        padding-top: 1rem;
      "
    ></div>
  </div>
</template>

<script>
import left from "../left.vue";
import top from "../top.vue";
import footers from "../footer.vue";
import topandleft from "../topandleft.vue";
export default {
  name: "duoshangpin",
  components: {
    left,
    top,
    topandleft,
    footers,
  },
  data() {
    return {
      log: false,
      search: {
        page: 1,
        page_size: 10,
        // tab:this.$route.query.id,
        goods_info: "", //商品名称或编码
        desc_status: "", //编辑状态
        status: 100, //上下架状态
      },
      total: 0,
      list: [],
      title: "",
      shoujiban: false,
      loading: false,
      finished: false,
      load: true,
    };
  },
  created() {
    //列表
  },
  mounted() {
    if (window.screen.width < 1080) {
      this.shoujiban = true;
      var h = document.documentElement.clientWidth / 7.5 + "px";
      document.documentElement.style.fontSize = h;

      this.load = false;
    } else {
      this.getlist();
    }
  },
  methods: {
    copys:function(){
      this.copy(`${window.location.origin}/h5/shangpinliebiao`);
    },
    onLoad() {},
    //编辑
    bianjishop(row) {
      console.log("row222", row);
      this.$router.push({
        // path:"/zhibotuiguang/shangpinfabu",
        // query:{
        //     id:item.id,
        //     type:'fix',
        //     one:1
        // }
        path: "/shangpinguanli/shangpinxiangqing",
        query: {
          id: row.id,
          type: "editShangpin",
          fwbdescription: row.description,
          fwbmin_age: row.min_age,
          fwbmax_age: row.max_age,
          fwbcontract: row.contract,
          fwbexpress: row.express,
          fwbactivation_method: row.activation_method,
        },
      });
    },
    //列表
    getlist: function () {
      axios
        .get("/own/page/package/details", { params: this.search })
        .then((response) => {
          console.log("response111111", response);
          if (response.data.msg.code == 0) {
            this.list = response.data.data.data;
            this.total = response.data.data.total;
            this.loading = false;
          } else {
            this.$message.error(response.data.msg.info);
          }
        });
    },
    //分页
    pagechange(val) {
      console.log(val);
      this.search.page = val;
      //列表
      this.getlist();
    },
    //搜索
    searchbtn() {
      this.search.page = 1;
      this.getlist();
    },
  },
};
</script>

<style scoped>
.t_over_text {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  width: calc(100% - 40px);
}
</style>
